// CSS 变量定义
:root {
  // 颜色系统
  --primary-color: #409eff;
  --primary-hover: #66b1ff;
  --primary-light: rgba(64, 158, 255, 0.1);
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #909399;

  // 文本颜色
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #c0c4cc;

  // 背景颜色
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7fa;
  --bg-tertiary: #fafafa;

  // 边框颜色
  --border-color: #dcdfe6;
  --border-light: #e4e7ed;
  --border-lighter: #ebeef5;
  --border-extra-light: #f2f6fc;
  --border-hover: #c0c4cc;

  // 间距
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;

  // 圆角
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  // 阴影
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  // 字体大小
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  // 过渡动画
  --transition-fast: all 0.2s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow: all 0.5s ease;

  // Z-index
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

// 深色主题
[data-theme="dark"] {
  --text-primary: #e5eaf3;
  --text-regular: #cfd3dc;
  --text-secondary: #a3a6ad;
  --text-placeholder: #6c6e72;

  --bg-primary: #141414;
  --bg-secondary: #1f1f1f;
  --bg-tertiary: #262626;

  --border-color: #303030;
  --border-light: #434343;
  --border-lighter: #595959;
  --border-extra-light: #6c6c6c;
  --border-hover: #8c8c8c;
}

// SCSS 变量（向后兼容）
$primary-color: var(--primary-color);
$primary-hover: var(--primary-hover);
$primary-light: var(--primary-light);

$text-primary: var(--text-primary);
$text-secondary: var(--text-secondary);
$text-placeholder: var(--text-placeholder);

$bg-primary: var(--bg-primary);
$bg-secondary: var(--bg-secondary);

$border-color: var(--border-color);
$border-hover: var(--border-hover);

$spacing-xs: var(--spacing-xs);
$spacing-sm: var(--spacing-sm);
$spacing-md: var(--spacing-md);
$spacing-lg: var(--spacing-lg);
$spacing-xl: var(--spacing-xl);
$spacing-2xl: var(--spacing-2xl);

$radius-sm: var(--radius-sm);
$radius-md: var(--radius-md);
$radius-lg: var(--radius-lg);
$radius-xl: var(--radius-xl);

$shadow-sm: var(--shadow-sm);
$shadow-md: var(--shadow-md);
$shadow-lg: var(--shadow-lg);
$shadow-xl: var(--shadow-xl);

$text-sm: var(--text-sm);
$text-base: var(--text-base);
$text-lg: var(--text-lg);
$text-xl: var(--text-xl);
$text-2xl: var(--text-2xl);
$text-3xl: var(--text-3xl);

$transition-fast: var(--transition-fast);
$transition-normal: var(--transition-normal);